<!-- 客户端个股文章详情页 -->
<template>
    <div id="articleDetail" v-show="loading">
        <div class="title">{{ articleDetail.title }}</div>
        <div class="intro">
            <span>{{ articleDetail.source }}</span>
            <span v-if="articleDetail.publDate">{{ articleDetail.publDate }}</span>
        </div>
        <div class="content wrapper" v-html="articleDetail.content || articleDetail.txtContent"></div>
        <div class="statement">
            免责声明：本终端所载数据仅供参考，若数据有误，以交易所发布数据为准，不对您构成投资建议。
        </div>
        <div class="showTime" v-show="show">暂无数据</div>
    </div>
</template>

<script>
import format from "date-fns/format";
import {GW,BASE_URL} from "@/common/const";

export default {
    data() {
        return {
            articleDetail: {},
            show: false,
            loading: false,
        };
    },
    mounted() {
        this.getArticleDetail();
    },
    methods: {
        async getArticleDetail() {

            const self = this;
            const urls = {
                newId: `${GW}/gw/ynstream/stream/info/client/new/detail`, //新闻详情
                noticeId: `${GW}/gw/ynstream/api/client/notice/detail`, //公告详情
                reportId: `${GW}/gw/ynstream/api/client/report/detail`, //研报详情
                skillId: `${BASE_URL}/client/skill_experienceDetail.htm`, //技巧心得详情
            };
            const matchKey = window.location.href.match(
                /(noticeId|reportId|skillId|newId)=(\d+)/
            );
            if (!matchKey) {
                this.loading = true;
                return;
            }

            //接收数据
            let queryData = this.formQuery();

            let key = matchKey[1];
            const value = matchKey[2];
            const type = key == "skillId" ? "id" : key;
            let url = '';

            if (queryData.newId){
                url = `${urls[key]}?${type}=${queryData.newId}&stockId=${queryData.stockId}&kcType=${queryData.kcType}`;
            }else {
                url = `${urls[key]}?${type}=${value}&stockId=${queryData.stockId}&kcType=${queryData.kcType}`;
            }


            const res = await fetch(url);
            const body = await res.json();
            this.loading = true;
            let data = {};
            if (body.status == 1) {
                data = body.data;
                self.articleDetail = data;
                self.show = Object.keys(data).length < 1;
            }
        },
    },
};
</script>
<style>
.content img {
    display: block;
    max-width: 90% !important;
}
</style>
<style lang="scss" scoped>
@import "./style/reset.css";


.wrapper {
    white-space: pre-wrap;
}


#articleDetail {
    margin: 0 auto;
    padding: 24px 28px;
    max-width: 1200px;

    img {
        max-width: 100%;
    }

    .title {
        color: #333333;
        font-size: 20px;
        font-weight: bold;
        line-height: 42px;
        text-align: center;
    }

    .intro {
        text-align: center;
        color: #666666;
        line-height: 42px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 20px;

        span {
            margin-right: 5px;
        }
    }

    .content {
        color: #333333;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
        word-break: break-all;
    }

    .statement {
        margin-top: 20px;
        height: 46px;
        line-height: 46px;
        border-top: 1px solid #e0e0e0;
        color: #999999;
        font-size: 15px;
        font-weight: 500;
    }

    .showTime {
        text-align: center;
        font-size: 0.5rem;
        font-weight: bold;
        color: #333333;
        padding-top: 0.8rem;
    }
}
</style>
